<template>
  <div class="publish-container">
    <div class="publish-form">
      <div class="publish-header">
        <h2>发表新闻</h2>
        <p class="subtitle">分享你的新闻动态</p>
      </div>
      <el-form
        ref="formRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <!-- 标题 -->
        <el-form-item label="标题" prop="title">
          <el-input
            v-model="formData.title"
            placeholder="请输入新闻标题（5-50字）"
            maxlength="50"
            show-word-limit
            size="large"
          />
        </el-form-item>

        <!-- 分类 -->
        <el-form-item label="分类" prop="categoryId">
          <el-select
            v-model="formData.categoryId"
            placeholder="请选择新闻分类"
            size="large"
          >
            <el-option
              v-for="item in categories"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <!-- 封面图片 -->
        <el-form-item label="封面图片" prop="picPath">
          <el-upload
            class="cover-uploader"
            :show-file-list="false"
            :before-upload="beforeUpload"
            :http-request="handleUpload"
            accept="image/*"
          >
            <img
              v-if="formData.picPath"
              :src="formData.picPath"
              class="cover-image"
            />
            <div v-else class="upload-placeholder">
              <el-icon class="upload-icon"><Plus /></el-icon>
              <p>点击上传封面图片</p>
              <p class="upload-tip">支持 jpg、png 格式，大小不超过 2MB</p>
            </div>
          </el-upload>
        </el-form-item>

        <!-- 摘要 -->
        <el-form-item label="摘要" prop="summary">
          <el-input
            v-model="formData.summary"
            type="textarea"
            :rows="3"
            placeholder="请输入新闻摘要，简要描述新闻内容..."
            maxlength="200"
            show-word-limit
          />
        </el-form-item>

        <!-- 富文本编辑器 -->
        <el-form-item label="内容" prop="content">
          <div class="editor-container">
            <!-- 工具栏 -->
            <div class="editor-toolbar" v-if="editorReady">
              <el-button-group>
                <el-button
                  :type="editor.isActive('bold') ? 'primary' : 'default'"
                  @click="editor.chain().focus().toggleBold().run()"
                  size="small"
                  title="粗体"
                >
                  <el-icon><Document /></el-icon>
                </el-button>
                <el-button
                  :type="editor.isActive('italic') ? 'primary' : 'default'"
                  @click="editor.chain().focus().toggleItalic().run()"
                  size="small"
                  title="斜体"
                >
                  <el-icon><Edit /></el-icon>
                </el-button>
                <el-button
                  :type="editor.isActive('underline') ? 'primary' : 'default'"
                  @click="editor.chain().focus().toggleUnderline().run()"
                  size="small"
                  title="下划线"
                >
                  <el-icon><Link /></el-icon>
                </el-button>
              </el-button-group>

              <el-button-group>
                <el-button
                  :type="
                    editor.isActive('heading', { level: 1 })
                      ? 'primary'
                      : 'default'
                  "
                  @click="
                    editor.chain().focus().toggleHeading({ level: 1 }).run()
                  "
                  size="small"
                  title="一级标题"
                >
                  H1
                </el-button>
                <el-button
                  :type="
                    editor.isActive('heading', { level: 2 })
                      ? 'primary'
                      : 'default'
                  "
                  @click="
                    editor.chain().focus().toggleHeading({ level: 2 }).run()
                  "
                  size="small"
                  title="二级标题"
                >
                  H2
                </el-button>
                <el-button
                  :type="
                    editor.isActive('heading', { level: 3 })
                      ? 'primary'
                      : 'default'
                  "
                  @click="
                    editor.chain().focus().toggleHeading({ level: 3 }).run()
                  "
                  size="small"
                  title="三级标题"
                >
                  H3
                </el-button>
              </el-button-group>

              <el-button-group>
                <el-button
                  :type="editor.isActive('bulletList') ? 'primary' : 'default'"
                  @click="editor.chain().focus().toggleBulletList().run()"
                  size="small"
                  title="无序列表"
                >
                  <el-icon><List /></el-icon>
                </el-button>
                <el-button
                  :type="editor.isActive('orderedList') ? 'primary' : 'default'"
                  @click="editor.chain().focus().toggleOrderedList().run()"
                  size="small"
                  title="有序列表"
                >
                  <el-icon><List /></el-icon>
                </el-button>
              </el-button-group>

              <el-button-group>
                <el-button
                  :type="editor.isActive('blockquote') ? 'primary' : 'default'"
                  @click="editor.chain().focus().toggleBlockquote().run()"
                  size="small"
                  title="引用"
                >
                  <el-icon><ChatDotRound /></el-icon>
                </el-button>
                <el-button @click="addImage" size="small" title="插入图片">
                  <el-icon><Picture /></el-icon>
                </el-button>
              </el-button-group>

              <el-button-group>
                <el-button
                  @click="editor.chain().focus().undo().run()"
                  :disabled="!editor.can().undo()"
                  size="small"
                  title="撤销"
                >
                  <el-icon><RefreshLeft /></el-icon>
                </el-button>
                <el-button
                  @click="editor.chain().focus().redo().run()"
                  :disabled="!editor.can().redo()"
                  size="small"
                  title="重做"
                >
                  <el-icon><RefreshRight /></el-icon>
                </el-button>
              </el-button-group>
            </div>

            <!-- 编辑器加载提示 -->
            <div v-else class="editor-loading">
              <el-icon class="is-loading"><RefreshLeft /></el-icon>
              <span>编辑器加载中...</span>
            </div>

            <!-- 编辑器内容区域 -->
            <div class="editor-content">
              <editor-content :editor="editor" />
            </div>
          </div>
        </el-form-item>

        <!-- 按钮组 -->
        <el-form-item>
          <el-button
            type="primary"
            @click="handleSubmit"
            :loading="submitting"
            size="large"
          >
            {{ submitting ? "发布中..." : "发布新闻" }}
          </el-button>
          <el-button
            type="success"
            @click="handleDraft"
            :loading="drafting"
            size="large"
          >
            {{ drafting ? "保存中..." : "保存草稿" }}
          </el-button>
          <el-button @click="handlePreview" size="large">预览</el-button>
          <el-button @click="handleReset" size="large">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 预览对话框 -->
    <el-dialog
      v-model="previewVisible"
      title="新闻预览"
      width="80%"
      class="preview-dialog"
    >
      <div class="preview-content">
        <h1>{{ formData.title }}</h1>
        <div class="preview-meta">
          <span>分类：{{ getCategoryName(formData.categoryId) }}</span>
          <span>作者：{{ userStore.username }}</span>
          <span>发布时间：{{ new Date().toLocaleString() }}</span>
        </div>
        <img
          v-if="formData.picPath"
          :src="formData.picPath"
          class="preview-image"
        />
        <div class="preview-summary" v-if="formData.summary">
          <h3>摘要</h3>
          <p>{{ formData.summary }}</p>
        </div>
        <div class="preview-body" v-html="formData.content"></div>
      </div>
    </el-dialog>

    <!-- 图片上传对话框 -->
    <el-dialog v-model="imageDialogVisible" title="插入图片" width="400px">
      <el-upload
        class="image-uploader"
        :show-file-list="false"
        :before-upload="beforeImageUpload"
        :http-request="handleImageUpload"
        accept="image/*"
      >
        <img v-if="imageUrl" :src="imageUrl" class="uploaded-image" />
        <div v-else class="image-upload-placeholder">
          <el-icon class="upload-icon"><Picture /></el-icon>
          <p>点击上传图片</p>
        </div>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="imageDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="insertImage" :disabled="!imageUrl">
            插入图片
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  computed,
  onMounted,
  onBeforeUnmount,
} from "vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import {
  Plus,
  Document,
  Edit,
  Link,
  List,
  ChatDotRound,
  Picture,
  RefreshLeft,
  RefreshRight,
} from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "axios";

// TipTap 相关导入
import { useEditor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Image from "@tiptap/extension-image";
import Underline from "@tiptap/extension-underline";

const router = useRouter();
const userStore = useUserStore();
const formRef = ref(null);
const loginFormRef = ref();

// 表单数据
const formData = reactive({
  title: "",
  categoryId: "",
  picPath: "",
  summary: "",
  content: "",
});

// 新闻分类
const categories = ref([]);

// 图片上传相关
const imageDialogVisible = ref(false);
const imageUrl = ref("");
const editorReady = ref(false);

// 状态控制
const submitting = ref(false);
const drafting = ref(false);
const previewVisible = ref(false);
const autoSaveTimer = ref(null);
const draftId = ref(null);

// 获取分类数据
const fetchCategories = async () => {
  try {
    const response = await axios.get("/app/categories");
    if (response.data.code === 200) {
      categories.value = response.data.data;
    } else {
      ElMessage.error("获取分类失败");
    }
  } catch (error) {
    console.error("获取分类失败:", error);
    ElMessage.error("获取分类失败，请刷新重试");
  }
};

// 在组件挂载时获取分类
onMounted(() => {
  fetchCategories();
  // 确保编辑器已初始化
  nextTick(() => {
    if (editor.value) {
      editor.value.commands.setContent("");
    }
  });

  // 检查是否有编辑的草稿数据
  const editDraft = localStorage.getItem("editDraft");
  if (editDraft) {
    try {
      const draftData = JSON.parse(editDraft);
      // 填充表单数据
      formData.title = draftData.title || "";
      formData.categoryId = draftData.categoryId || "";
      formData.picPath = draftData.picPath || "";
      formData.summary = draftData.summary || "";
      formData.content = draftData.content || "";
      // 保存草稿ID
      draftId.value = draftData.id || null;

      // 设置编辑器内容
      if (editorReady.value && editor.value && draftData.content) {
        editor.value.commands.setContent(draftData.content);
      }

      // 清除localStorage中的草稿数据
      localStorage.removeItem("editDraft");

      ElMessage.success("草稿数据已加载");
    } catch (error) {
      console.error("加载草稿数据失败:", error);
      localStorage.removeItem("editDraft");
    }
  }

  // 启动自动保存
  startAutoSave();
});

// 表单验证规则
const rules = {
  title: [
    { required: true, message: "请输入新闻标题", trigger: "blur" },
    {
      min: 5,
      max: 50,
      message: "标题长度应在 5 到 50 个字符之间",
      trigger: "blur",
    },
  ],
  categoryId: [
    { required: true, message: "请选择新闻分类", trigger: "change" },
  ],
  summary: [
    { required: true, message: "请输入新闻摘要", trigger: "blur" },
    {
      min: 10,
      max: 200,
      message: "摘要长度应在 10 到 200 个字符之间",
      trigger: "blur",
    },
  ],
  content: [
    { required: true, message: "请输入新闻内容", trigger: "blur" },
    { min: 10, message: "内容不能少于 10 个字符", trigger: "blur" },
  ],
};

// TipTap 编辑器配置
const editor = useEditor({
  content: "",
  extensions: [StarterKit, Image, Underline],
  onUpdate: ({ editor }) => {
    formData.content = editor.getHTML();
  },
  onBeforeCreate: ({ editor }) => {
    editorReady.value = false;
  },
  onCreate: ({ editor }) => {
    editorReady.value = true;
  },
  editorProps: {
    attributes: {
      class:
        "prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none",
    },
  },
});

// 图片上传相关
const beforeUpload = (file) => {
  const isValidFormat = ["image/jpeg", "image/png", "image/gif"].includes(
    file.type
  );
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isValidFormat) {
    ElMessage.error("图片只能是 JPG、PNG 或 GIF 格式!");
    return false;
  }
  if (!isLt2M) {
    ElMessage.error("图片大小不能超过 2MB!");
    return false;
  }
  return true;
};

const handleUpload = async (options) => {
  try {
    const uploadFormData = new FormData();
    uploadFormData.append("file", options.file);

    const response = await axios.post("/app/upload/image", uploadFormData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });

    if (response.data.code === 200) {
      formData.picPath = response.data.data;
      ElMessage.success("封面图片上传成功");
    } else {
      ElMessage.error(response.data.message || "图片上传失败");
    }
  } catch (error) {
    console.error("图片上传失败:", error);
    ElMessage.error("图片上传失败，请重试");
  }
};

// 富文本编辑器图片相关
const addImage = () => {
  if (!editorReady.value || !editor.value) {
    ElMessage.warning("编辑器还未初始化，请稍后再试");
    return;
  }
  imageDialogVisible.value = true;
  imageUrl.value = "";
};

const beforeImageUpload = (file) => {
  const isValidFormat = ["image/jpeg", "image/png", "image/gif"].includes(
    file.type
  );
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isValidFormat) {
    ElMessage.error("图片只能是 JPG、PNG 或 GIF 格式!");
    return false;
  }
  if (!isLt5M) {
    ElMessage.error("图片大小不能超过 5MB!");
    return false;
  }
  return true;
};

const handleImageUpload = async (options) => {
  try {
    const uploadFormData = new FormData();
    uploadFormData.append("file", options.file);

    const response = await axios.post("/app/upload/image", uploadFormData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });

    if (response.data.code === 200) {
      imageUrl.value = response.data.data;
      
      ElMessage.success("图片上传成功");
    } else {
      ElMessage.error(response.data.message || "图片上传失败");
    }
  } catch (error) {
    console.error("图片上传失败:", error);
    ElMessage.error("图片上传失败，请重试");
  }
};

const insertImage = () => {
  if (imageUrl.value && editorReady.value && editor.value) {
    editor.value.chain().focus().setImage({ src: imageUrl.value }).run();
    imageDialogVisible.value = false;
    imageUrl.value = "";
  } else if (!editorReady.value || !editor.value) {
    ElMessage.warning("编辑器还未初始化，请稍后再试");
  }
};

// 预览相关
const getCategoryName = (id) => {
  const category = categories.value.find((c) => c.id === id);
  return category ? category.name : "未分类";
};

const handlePreview = () => {
  if (!formData.title || !formData.content) {
    ElMessage.warning("请先填写标题和内容");
    return;
  }
  previewVisible.value = true;
};

// 发布新闻（提交审核）
const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return;

    // 检查用户是否登录
    if (!userStore.isLoggedIn()) {
      console.log("用户未登录，调试信息:", userStore.getDebugInfo());
      ElMessage.error("请先登录");
      router.push("/login");
      return;
    }

    try {
      await ElMessageBox.confirm(
        "发布后需要管理员审核通过才能显示，确定要发布吗？",
        "确认发布",
        {
          confirmButtonText: "确定发布",
          cancelButtonText: "取消",
          type: "warning",
        }
      );
    } catch {
      return;
    }

    submitting.value = true;
    try {
      const newsData = {
        categoryId: formData.categoryId,
        title: formData.title,
        summary: formData.summary,
        content: formData.content,
        picPath: formData.picPath,
        author: userStore.getUsername(),
        authorId: parseInt(userStore.userId),
      };

      const response = await axios.post(
        "/app/news/publish-with-review",
        newsData
      );

      if (response.data.code === 200) {
        // 如果有草稿ID，删除对应的草稿
        if (draftId.value) {
          try {
            await axios.delete(`/app/news/draft/${draftId.value}`);
            console.log("草稿删除成功:", draftId.value);
          } catch (error) {
            console.error("删除草稿失败:", error);
            // 不影响主流程，只记录错误
          }
        }

        ElMessage.success("新闻发布成功，等待管理员审核");
        router.push("/");
      } else {
        ElMessage.error(response.data.message || "发布失败");
      }
    } catch (error) {
      console.error("发布失败:", error);
      ElMessage.error("发布失败，请重试");
    } finally {
      submitting.value = false;
    }
  });
};

// 保存草稿
const handleDraft = () => {
  if (!formData.title && !formData.content) {
    ElMessage.warning("请至少填写标题或内容");
    return;
  }

  // 检查用户是否登录
  if (!userStore.isLoggedIn()) {
    console.log("用户未登录，调试信息:", userStore.getDebugInfo());
    ElMessage.error("请先登录");
    router.push("/login");
    return;
  }

  drafting.value = true;

  const draftData = {
    categoryId: formData.categoryId || null,
    title: formData.title,
    summary: formData.summary,
    content: formData.content,
    picPath: formData.picPath,
    authorId: parseInt(userStore.userId),
  };

  // 如果有草稿ID，添加到请求数据中
  if (draftId.value) {
    draftData.id = draftId.value;
  }

  axios
    .post("/app/news/draft/save", draftData)
    .then((response) => {
      if (response.data.code === 200) {
        // 保存后端返回的草稿ID
        if (response.data.data && response.data.data.id) {
          draftId.value = response.data.data.id;
        }
        ElMessage.success("草稿保存成功");
      } else {
        ElMessage.error(response.data.message || "保存失败");
      }
    })
    .catch((error) => {
      console.error("保存草稿失败:", error);
      if (error.response?.data?.message) {
        ElMessage.error(error.response.data.message);
      } else {
        ElMessage.error("保存草稿失败，请重试");
      }
    })
    .finally(() => {
      drafting.value = false;
    });
};

// 重置表单
const handleReset = () => {
  ElMessageBox.confirm("确定要重置所有内容吗？", "确认重置", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      formRef.value.resetFields();
      if (editorReady.value && editor.value) {
        editor.value.commands.setContent("");
      }
      formData.picPath = "";
      formData.summary = "";
      draftId.value = null;
      ElMessage.success("表单已重置");
    })
    .catch(() => {
      // 用户取消重置
    });
};

// 自动保存草稿
const startAutoSave = () => {
  // 清除之前的定时器
  if (autoSaveTimer.value) {
    clearInterval(autoSaveTimer.value);
  }

  // 每30秒自动保存一次草稿
  autoSaveTimer.value = setInterval(() => {
    if (formData.title || formData.content) {
      autoSaveDraft();
    }
  }, 30000); // 30秒
};

const autoSaveDraft = async () => {
  if (!formData.title && !formData.content) return;

  // 检查用户是否登录
  if (!userStore.isLoggedIn()) {
    console.log(
      "用户未登录，跳过自动保存，调试信息:",
      userStore.getDebugInfo()
    );
    return;
  }

  const draftData = {
    categoryId: formData.categoryId || null,
    title: formData.title,
    summary: formData.summary,
    content: formData.content,
    picPath: formData.picPath,
    authorId: parseInt(userStore.userId),
  };

  // 如果有草稿ID，添加到请求数据中
  if (draftId.value) {
    draftData.id = draftId.value;
  }

  try {
    const response = await axios.post("/app/news/draft/save", draftData);
    if (response.data.code === 200) {
      // 保存后端返回的草稿ID
      if (response.data.data && response.data.data.id) {
        draftId.value = response.data.data.id;
        console.log("草稿自动保存成功，草稿ID:", draftId.value);
      }
    } else {
      console.error("草稿自动保存失败:", response.data.msg);
    }
  } catch (error) {
    console.error("草稿自动保存失败:", error);
  }
};

// 停止自动保存
const stopAutoSave = () => {
  if (autoSaveTimer.value) {
    clearInterval(autoSaveTimer.value);
    autoSaveTimer.value = null;
  }
};

// 组件销毁时清理编辑器
onBeforeUnmount(() => {
  if (editor.value) {
    editor.value.destroy();
  }
  editorReady.value = false;

  // 停止自动保存
  stopAutoSave();
});
</script>

<style scoped>
.publish-container {
  max-width: 100%;

  padding: 20px;
  min-height: 100vh;
  /* 添加背景图片 */
  background-image: url("/images/backgroundImages/blueArchive5.jpg"); /* 图片路径 */
  background-size: cover; /* 覆盖整个区域 */
  background-position: center; /* 居中显示 */
  background-repeat: no-repeat; /* 不重复 */
  background-attachment: fixed; /* 固定背景 */
}

.publish-header {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 900px;
  width: 90%;
  background-color: #e8e6e6;
  padding: 20px;
  border-radius: 8px; /* 可选 */
}

.publish-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  color: #666;
  font-size: 16px;
}

.publish-form {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 900px;
  margin: 40px auto;
}

:deep(.el-form-item__content) {
  flex: 1 1 0%;
  width: 100%;
  padding-right: 0;
  box-sizing: border-box;
}

/* 封面图片上传 */
.cover-uploader {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.cover-uploader:hover {
  border-color: #409eff;
}

.upload-placeholder {
  text-align: center;
  color: #8c939d;
}

.upload-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.upload-tip {
  font-size: 12px;
  margin-top: 4px;
  color: #999;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 富文本编辑器 */
.editor-container {
  border: none;
  border-radius: 0;
  overflow: visible;
  background: none;
}

.editor-toolbar {
  padding: 12px 0 12px 0;
  background: none;
  border-bottom: none;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  box-shadow: none;
}

.editor-loading {
  text-align: center;
  padding: 20px 0;
  color: #666;
  background: none;
  border-bottom: none;
}

.editor-content {
  min-height: 400px;
  padding: 0;
  background: none;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-sizing: border-box;
  width: 750px;
}

.editor-content :deep(.ProseMirror) {
  outline: none;
  min-height: 360px;
  line-height: 1.6;
  background: none;
  border: none;
}

.editor-content :deep(.ProseMirror p) {
  margin: 0 0 16px 0;
}

.editor-content :deep(.ProseMirror h1) {
  font-size: 24px;
  font-weight: bold;
  margin: 24px 0 16px 0;
  color: #333;
}

.el-form-item__content {
  display: block;
}

.editor-content :deep(.ProseMirror h2) {
  font-size: 20px;
  font-weight: bold;
  margin: 20px 0 12px 0;
  color: #333;
}

.editor-content :deep(.ProseMirror h3) {
  font-size: 18px;
  font-weight: bold;
  margin: 16px 0 8px 0;
  color: #333;
}

.editor-content :deep(.ProseMirror ul),
.editor-content :deep(.ProseMirror ol) {
  padding-left: 24px;
  margin: 16px 0;
}

.editor-content :deep(.ProseMirror li) {
  margin: 4px 0;
}

.editor-content :deep(.ProseMirror blockquote) {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  color: #666;
  font-style: italic;
}

.editor-content :deep(.ProseMirror img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
}

/* 图片上传对话框 */
.image-uploader {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: border-color 0.3s;
}

.image-uploader:hover {
  border-color: #409eff;
}

.image-upload-placeholder {
  text-align: center;
  color: #8c939d;
}

.uploaded-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 预览对话框 */
.preview-dialog :deep(.el-dialog__body) {
  padding: 30px;
}

.preview-content {
  max-width: 800px;
  margin: 0 auto;
}

.preview-content h1 {
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.preview-meta {
  color: #666;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
}

.preview-image {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  margin: 20px 0;
  border-radius: 8px;
}

.preview-summary {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 6px;
  margin: 20px 0;
  border-left: 4px solid #409eff;
}

.preview-summary h3 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 16px;
}

.preview-summary p {
  margin: 0;
  color: #666;
  line-height: 1.6;
}

.preview-body {
  line-height: 1.8;
  color: #333;
  margin: 20px 0;
}

.preview-body h1,
.preview-body h2,
.preview-body h3 {
  color: #333;
  margin: 24px 0 16px 0;
}

.preview-body p {
  margin: 0 0 16px 0;
}

.preview-body ul,
.preview-body ol {
  padding-left: 24px;
  margin: 16px 0;
}

.preview-body blockquote {
  border-left: 4px solid #409eff;
  padding-left: 16px;
  margin: 16px 0;
  color: #666;
  font-style: italic;
}

.preview-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 16px 0;
}
</style>
